<template>
	<div>
		<el-card class="layout-search-card mb-4" shadow="never" :body-style="{ paddingBottom: '0' }">
			<el-form :model="state.queryParams" ref="queryForm" :inline="true">
				<el-form-item label="账号：">
					<el-input v-model="state.queryParams.account" placeholder="请输入账号" class="w-[200px]"> </el-input>
				</el-form-item>
				<el-form-item label="姓名：">
					<el-input v-model="state.queryParams.name" placeholder="请输入姓名" class="w-[200px]"> </el-input>
				</el-form-item>
				<el-form-item label="角色：" prop="role_id">
					<el-select class="w-[200px]" placeholder="请选择角色" clearable v-model="state.queryParams.role_id">
						<el-option v-for="(item, index) in roleOptionsData" :key="index" :label="item.name" :value="item.id" />
					</el-select>
				</el-form-item>
				<el-form-item label="部门：" prop="dept_id">
					<el-cascader
						ref="cateTreeRef"
						:options="deptOptionsData"
						:props="{ multiple: false, checkStrictly: true, emitPath: false, value: 'id', label: 'name' }"
						placeholder="请选择部门"
						class="w-[200px]"
						clearable
						v-model="state.queryParams.dept_id"
					>
						<template #default="{ data }">
							<span>{{ data.name }}</span>
						</template>
					</el-cascader>
				</el-form-item>
				<el-form-item label="岗位：" prop="jobs_id">
					<el-select class="w-[200px]" placeholder="请选择岗位" clearable v-model="state.queryParams.jobs_id">
						<el-option v-for="(item, index) in jobsOptionsData" :key="index" :label="item.name" :value="item.id" />
					</el-select>
				</el-form-item>
				<el-form-item label="状态">
					<el-select class="w-[150px]" v-model="state.queryParams.disable">
						<el-option label="全部" value="" />
						<el-option label="正常" value="0" />
						<el-option label="禁用" value="1" />
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-button-group>
						<el-button type="primary" icon="ele-Search" @click="searchTable"> 查询 </el-button>
						<el-button icon="ele-Refresh" @click="resetQuery" class="ml15"> 重置 </el-button>
					</el-button-group>
				</el-form-item>
			</el-form>
		</el-card>
		<el-card class="layout-table-card" shadow="never">
			<el-button size="default" v-auth="'auth/admin/add'" type="primary" class="mb-4" @click="handleAdd()"> 添加管理员 </el-button>
			<el-table :data="state.tableList" v-loading="state.loading">
				<el-table-column prop="id" label="ID" width="60" />
				<el-table-column prop="account" label="账号" show-overflow-tooltip></el-table-column>
				<el-table-column prop="name" label="姓名" show-overflow-tooltip></el-table-column>
				<el-table-column prop="role_name" label="角色" show-overflow-tooltip></el-table-column>
				<el-table-column prop="dept_name" label="部门" show-overflow-tooltip></el-table-column>
				<el-table-column prop="status" label="状态" show-overflow-tooltip>
					<template #default="{ row }">
						<el-tag type="danger" v-if="row.disable">{{ row.disable_desc }}</el-tag>
						<el-tag type="success" v-else>{{ row.disable_desc }}</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="create_time" label="创建时间" show-overflow-tooltip></el-table-column>
				<el-table-column label="操作" width="150">
					<template #default="{ row }">
						<el-button size="small" v-auth="'auth/admin/detail'" text type="primary">
							<router-link :to="{ path: '/auth/user/detail', query: { id: row.id } }"> 详情 </router-link>
						</el-button>
						<el-button size="small" v-auth="'auth/admin/edit'" text type="primary" @click="handleEdit(row)">编辑</el-button>
						<el-button v-if="row.root !== 1" size="small" v-auth="'auth/admin/delete'" text type="primary" @click="handleDelete(row.id)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="flex justify-end mt-4">
				<pagination v-model="state" @tableChange="getTableList" />
			</div>
		</el-card>
		<EditDialog v-if="showDialog" ref="editRef" @submit="getTableList" @close="showDialog = false" />
	</div>
</template>

<script setup lang="ts" name="authUserList">
import { reactive, onMounted, ref, nextTick } from 'vue';
import { messageBox } from '/@/utils/message';
import { adminLists, adminDelete } from '/@/api/auth/admin';
import { usePage } from '/@/hooks/usePage';
import { roleAll } from '/@/api/auth/role';
import { deptAll } from '/@/api/auth/dept';
import { jobsAll } from '/@/api/auth/jobs';
import EditDialog from '/@/views/auth/user/component/edit.vue';

const editRef = ref();

const showDialog = ref(false);

const roleOptionsData = ref([]);

const deptOptionsData = ref([]);

const jobsOptionsData = ref([]);

const setOptionsData = async () => {
	deptOptionsData.value = await deptAll();
	jobsOptionsData.value = await jobsAll();
	roleOptionsData.value = await roleAll();
};

// 定义列表
const state = reactive<TableDataState>({
	loading: false,
	tableList: [],
	queryParams: {
		account: '',
		name: '',
		disable: '',
		role_id: '',
		dept_id: '',
		jobs_id: '',
	},
	tableParams: {
		page_num: 1,
		page_limit: 15,
		page_total: 0 as any,
	},
});

const { getTableList, searchTable, resetQuery } = usePage({ tableData: state, apiData: adminLists });

const handleAdd = async () => {
	showDialog.value = true;
	nextTick(() => {
		editRef.value?.open('add');
	});
};

const handleEdit = async (row: any) => {
	showDialog.value = true;
	nextTick(() => {
		editRef.value?.setFormData(row, () => {
			editRef.value?.open('edit');
		});
	});
};

const handleDelete = async (id: number) => {
	messageBox(`确定要删除管理员吗？`).then(async () => {
		await adminDelete({ id: id });
		getTableList();
	});
};

onMounted(() => {
	getTableList();
	setOptionsData();
});
</script>
